import React, { Component } from 'react';
import {connect} from 'react-redux';
import { methods } from './store';
import { WidthLimit,
    HeaderWrapper,
    Logo,
    LogoImg,
    Nav,
    NavItem,
    NavItems,
    Search,
    SearchListWrapper,
    SearchListTitle,
    SearchListSwitch,
    SearchListItemWrapper,
    SearchListItem,
    SearchItemLink,
    LinkRight,
    Login,
    Beta,
    LinkBeta,
    BetaImg} from './style';
import logoPic from '../images/logo.png';
import betaPic from '../images/beat.png';


class Header extends Component {
    getSearchItem() {
        const {focus,list,mouseIn,handleMouseEnter, handleMouseLeave, page, totalPage, handleSwitch} = this.props;
        const showSearchItem = 6;
        let newList = [];
        let pageList = list.toJS();
        if (pageList.length) {
            for (let i = (page - 1) * showSearchItem; i < page * showSearchItem; i++) {
                pageList[i] && newList.push(
                    <SearchListItem key={pageList[i]}><SearchItemLink>{pageList[i]}</SearchItemLink> </SearchListItem>
                )
            }
        }

        if (focus || mouseIn) {
            return (
                <SearchListWrapper onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
                    <SearchListTitle>
                        热门搜索
                        <SearchListSwitch onClick={() => handleSwitch(page,totalPage,this.iconSpin)}>
                            <i className="iconfont spin" ref={(icon) => this.iconSpin = icon}>&#xe851;</i>
                            换一换
                        </SearchListSwitch>
                    </SearchListTitle>
                    <SearchListItemWrapper>
                        {newList}
                    </SearchListItemWrapper>
                </SearchListWrapper>
            )
        } else {
            return null;
        }
    }

    render() {
        const {focus,handleInputFocus,handleInputBlur,list} = this.props;
        return (
            <HeaderWrapper >
                <WidthLimit>
                    <Logo>
                        <LogoImg src={logoPic}/>
                    </Logo>
                    <Nav>
                        <NavItem>
                            <NavItems className='index'>首页</NavItems>
                            <NavItems className='downLoad'>下载APP</NavItems>
                            <NavItems className='search'>
                                <i className={focus ? 'focused iconfont zoom' : 'iconfont zoom'}>&#xe64d;</i>
                                <Search
                                    className={focus ? 'focused' : ''}
                                    onFocus={() => handleInputFocus(list)}
                                    onBlur={handleInputBlur}
                                />
                                {this.getSearchItem(focus)}
                            </NavItems>
                        </NavItem>
                    </Nav>
                    <Beta>
                        <LinkBeta>
                            <BetaImg src={betaPic} />
                        </LinkBeta>
                    </Beta>
                    <Login>登录</Login>
                    <LinkRight className='reg'>注册</LinkRight>
                    <LinkRight className='writing'>
                        <i className="iconfont" >&#xe622;</i>
                        写文章
                    </LinkRight>
                </WidthLimit>
            </HeaderWrapper>
        )
    }
}


const mapStateToProps = (state) => {
    return {
        focus: state.getIn(['header','focus']),
        list: state.getIn(['header','list']),
        mouseIn: state.getIn(['header','mouseIn']),
        page: state.getIn(['header','page']),
        totalPage: state.getIn(['header','totalPage']),
    }
};
const mapDispatchToProps = (dispatch) => {
    return {
        handleInputFocus(list) {
            list = list.toJS();
            (!list.length) && dispatch(methods.asyncHeaderList());
            dispatch(methods.getInputFocusValue());
        },
        handleInputBlur() {
            dispatch(methods.getInputBlurValue());
        },
        handleMouseEnter() {
            dispatch(methods.setMouseEnter());
        },
        handleMouseLeave() {
            dispatch(methods.setMouseLeave());
        },
        handleSwitch(page,totalPage,spin) {
            // 小圆圈旋转
            let originAngle = spin.style.transform.replace(/[^0-9]/ig, '');
            if (originAngle) {
                originAngle = parseInt(originAngle);
            } else {
                originAngle = 0
            }
            spin.style.transform = `rotate(${originAngle + 360}deg)`;
            if (page < totalPage) {
                dispatch(methods.setAddPage(page + 1));
            } else {
                dispatch(methods.setAddPage(1));
            }
        }
    }
};
export default connect(mapStateToProps,mapDispatchToProps)(Header);